<template>
  <view class="profile-page">

    <!-- 个人资料头部 -->
    <view class="profile-header">
      <image class="header-bg" src="https://images.unsplash.com/photo-1506905925346-21bda4d32df4?ixlib=rb-1.2.1&auto=format&fit=crop&w=800&q=80" mode="aspectFill"></image>
      <view class="profile-info">
        <image class="profile-avatar" :src="userInfo.avatar" mode="aspectFill"></image>
        <view class="profile-details">
          <text class="profile-name">{{ userInfo.name }}</text>
          <text class="profile-motto">{{ userInfo.motto }}</text>
        </view>
      </view>
    </view>

    <!-- 我的帖子区域 -->
    <view class="section-container">
      <view class="section-header">
        <text class="section-title">我的帖子({{ userInfo.postsCount }})</text>
        <text class="view-all" @tap="viewAllPosts">查看全部</text>
      </view>
      <view class="posts-grid">
        <view 
          class="post-item" 
          v-for="(post, index) in userInfo.recentPosts" 
          :key="index"
          @tap="viewPost(post)"
        >
          <image-preview 
            :imageUrl="post.image" 
            :imageList="userInfo.recentPosts.map(item => item.image)"
            @click="handleImageClick"
          />
        </view>
      </view>
    </view>

    <!-- 我的收藏区域 -->
    <view class="section-container">
      <view class="section-header">
        <text class="section-title">我的收藏({{ userInfo.collectionsCount }})</text>
        <text class="view-all" @tap="viewAllCollections">查看全部</text>
      </view>
      <view class="collections-grid">
        <view 
          class="collection-item" 
          v-for="(collection, index) in userInfo.recentCollections" 
          :key="index"
          @tap="viewCollection(collection)"
        >
          <image-preview 
            :imageUrl="collection.image" 
            :imageList="userInfo.recentCollections.map(item => item.image)"
            @click="handleImageClick"
          />
        </view>
      </view>
    </view>
    <!-- 菜单区域 -->
    <view class="menu-section">
      <view class="menu-item" @tap="handleMenuClick('settings')">
        <view class="menu-icon">
          <uv-icon name="setting" color="#4ECDC4" size="24"></uv-icon>
        </view>
        <text class="menu-text">设置</text>
        <uv-icon name="arrow-right" color="#ccc" size="16"></uv-icon>
      </view>
      
      <view class="menu-item" @tap="handleMenuClick('help')">
        <view class="menu-icon">
          <uv-icon name="question-circle" color="#4ECDC4" size="24"></uv-icon>
        </view>
        <text class="menu-text">帮助与反馈</text>
        <uv-icon name="arrow-right" color="#ccc" size="16"></uv-icon>
      </view>
      
      <view class="menu-item" @tap="handleMenuClick('about')">
        <view class="menu-icon">
          <uv-icon name="info-circle" color="#4ECDC4" size="24"></uv-icon>
        </view>
        <text class="menu-text">关于我们</text>
        <uv-icon name="arrow-right" color="#ccc" size="16"></uv-icon>
      </view>
      
      <view class="menu-item" @tap="handleMenuClick('privacy')">
        <view class="menu-icon">
            <i class="iconfont iconfont-fasfa-shield-altCopy"
             style="font-size: 36rpx;color: #4ECDC4;"></i>
       </view>
        <text class="menu-text">隐私政策</text>
        
        <uv-icon name="arrow-right" color="#ccc" size="16"></uv-icon>
      </view>
    </view>
    <!-- 底部导航栏 -->
    <!-- <uv-tabbar :value="tabValue" @change="tabChange" activeColor="#4ECDC4" style="width: 100%;">
      <uv-tabbar-item text="主页" icon="home-fill"></uv-tabbar-item>
      <uv-tabbar-item text="社区" icon="grid-fill"></uv-tabbar-item>
      <uv-tabbar-item text="我的" icon="account-fill"></uv-tabbar-item>
    </uv-tabbar> -->
    <uv-tabbar
      :value="tabValue"
      @change="tabChange"
      activeColor="#4ECDC4"
      style="width: 100%"
    >
      <uv-tabbar-item text="模拟面试" icon="play-circle"></uv-tabbar-item>
      <uv-tabbar-item text="演练面试" icon="reload"></uv-tabbar-item>
      <uv-tabbar-item text="我的信息" icon="account"></uv-tabbar-item>
    </uv-tabbar>
  </view>
</template>

<script>
import ImagePreview from '@/components/zoe-picPreview/image-preview/index.vue'

export default {
  components: {
    ImagePreview
  },
  data() {
    return {
      tabValue: 2, // 我的页面激活
      userInfo: {
        name: '张小红',
        avatar: 'https://images.unsplash.com/photo-1494790108755-2616b612b786?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80',
        motto: '沟通改变人生, 练习成就未来',
        postsCount: 128,
        collectionsCount: 56,
        recentPosts: [
          {
            id: 1,
            image: 'https://images.unsplash.com/photo-1521791136064-7986c2920216?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60',
            title: '职场面试技巧分享'
          },
          {
            id: 2,
            image: 'https://images.unsplash.com/photo-1556761175-b413da4baf72?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60',
            title: '团队协作经验'
          },
          {
            id: 3,
            image: 'https://images.unsplash.com/photo-1589391886645-d51941baf7fb?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60',
            title: '商务谈判心得'
          },
          {
            id: 4,
            image: 'https://images.unsplash.com/photo-1511306404404-ad607bd7c601?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60',
            title: '户外团队建设'
          }
        ],
        recentCollections: [
          {
            id: 1,
            image: 'https://images.unsplash.com/photo-1521791136064-7986c2920216?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60',
            title: '面试技巧分享'
          },
          {
            id: 2,
            image: 'https://images.unsplash.com/photo-1556761175-b413da4baf72?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60',
            title: '团队协作经验'
          },
          {
            id: 3,
            image: 'https://images.unsplash.com/photo-1589391886645-d51941baf7fb?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60',
            title: '商务谈判心得'
          },
          {
            id: 4,
            image: 'https://images.unsplash.com/photo-1511306404404-ad607bd7c601?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=60',
            title: '户外团队建设'
          }
        ]
      }
    }
  },
  methods: {
    viewAllPosts() {
      uni.showToast({
        title: '查看全部帖子',
        icon: 'none'
      })
    },
    viewAllCollections() {
      uni.showToast({
        title: '查看全部收藏',
        icon: 'none'
      })
    },
    viewPost(post) {
      uni.navigateTo({
        url: `/pages/communityDetail?id=${post.id}`
      })
    },
    viewCollection(collection) {
      uni.showToast({
        title: `查看收藏: ${collection.title}`,
        icon: 'none'
      })
    },
    handleImageClick() {
      console.log('图片被点击')
    },
    handleMenuClick(type) {
      switch(type) {
        case 'settings':
          uni.showToast({
            title: '设置功能开发中',
            icon: 'none'
          })
          break
        case 'help':
          uni.showToast({
            title: '帮助与反馈功能开发中',
            icon: 'none'
          })
          break
        case 'about':
          uni.showToast({
            title: '关于我们功能开发中',
            icon: 'none'
          })
          break
        case 'privacy':
          uni.showToast({
            title: '隐私政策功能开发中',
            icon: 'none'
          })
          break
      }
    },
    tabChange(index) {
      this.tabValue = index
      if (index === 0) {
        uni.navigateTo({ url: '/pages/index/index' })
      } else if (index === 1) {
        uni.navigateTo({ url: '/pages/community' })
      } else if (index === 2) {
        // 当前页面，不需要跳转
      }
    },
    tabChange(index) {
      this.tabValue = index
      if (index === 0) {
        uni.navigateTo({ url: '/pages/interview' })
      } else if (index === 1) {
        uni.navigateTo({ url: '/pages/practiceHistory' })
      } else if (index === 2) {
        uni.navigateTo({ url: '/pages/profile' })
      }
    },
  },
  onLoad() {
    // 页面加载时的初始化逻辑
  },
  onShow() {
    // 页面显示时的逻辑
  }
}
</script>

<style lang="scss" scoped>
@import '@/uni.scss';
.profile-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 100rpx;
}

.status-bar {
  background: #4ECDC4;
  height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 20rpx;
}

.status-text {
  color: #fff;
  font-size: 24rpx;
}

.profile-header {
  position: relative;
  height: 400rpx;
  overflow: hidden;
}

.header-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.profile-info {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  padding: 60rpx 40rpx 40rpx 40rpx;
  height: 100%;
}

.profile-avatar {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  border: 4rpx solid rgba(255, 255, 255, 0.3);
  margin-right: 30rpx;
}

.profile-details {
  flex: 1;
}

.profile-name {
  font-size: 48rpx;
  font-weight: bold;
  color: #fff;
  display: block;
  margin-bottom: 16rpx;
  text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
}

.profile-motto {
  font-size: 28rpx;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.4;
  display: block;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.3);
}

.section-container {
  background: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  padding: 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.view-all {
  font-size: 26rpx;
  color: #4ECDC4;
}

.posts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16rpx;
}

.post-item {
  aspect-ratio: 1;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.post-item image-preview {
  width: 100%;
  height: 100%;
}

.collections-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16rpx;
}

.collection-item {
  aspect-ratio: 1;
  border-radius: 12rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.collection-item image-preview {
  width: 100%;
  height: 100%;
}

/* 图片预览组件样式适配 */
.post-item .preview-image,
.collection-item .preview-image {
  width: 100%;
  height: 100%;
  border-radius: 12rpx;
}

/* 菜单区域样式 */
.menu-section {
  background: #fff;
  margin: 20rpx;
  border-radius: 16rpx;
  padding: 0 30rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 30rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
  position: relative;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-icon {
  margin-right: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40rpx;
  height: 40rpx;
}

.menu-text {
  flex: 1;
  font-size: 28rpx;
  color: #333;
}

.menu-item:active {
  background-color: #f5f5f5;
}
</style>
